@tailwind base;
@tailwind components;
@tailwind utilities;

:root, body {
    --primary-1: 232, 243, 255;
    --primary-2: 189, 214, 247;
    --primary-3: 147, 184, 239;
    --primary-4: 109, 153, 231;
    --primary-5: 72, 122, 223;
    --primary-6: 38, 91, 215;
    --primary-7: 24, 66, 180;
    --primary-8: 13, 44, 146;
    --primary-9: 5, 26, 111;
    --primary-10: 0, 13, 77;
    --color-primary-light-1: rgb(var(--primary-1));
    --color-primary-light-2: rgb(var(--primary-2));
    --color-primary-light-3: rgb(var(--primary-3));
    --color-primary-light-4: rgb(var(--primary-4));

    --window-header-height: 2.5rem;
    --page-nav-width: 4rem;

    //--color-primary: #5154E0; // 41	85	254
    --color-primary: #265BD7;
    // --color-primary-lighter: #6A6DFF;
    --color-primary-lighter: lighten(#265BD7, 10%);
    //--color-bg-page-nav: #2A3A5D;
    --color-bg-page-nav: #FFFFFF;
    //--color-bg-page-nav-active: #5154E0;
    --color-bg-page-nav-active: #FFFFFF;
    //--color-text-page-nav: #FFFFFF;
    --color-text-page-nav: #000000;
    //--color-text-page-nav-active: #EEEEEE;
    --color-text-page-nav-active: #265BD7;
    //--color-border-page-nav: #2A3A5D;
    --color-border-page-nav: #EEEEEE;

    --color-background: #FFFFFF;
    --color-text: #111111;
    --color-border: #E5E6EB;
}

body[data-theme="dark"] {

    --primary-1: 0, 13, 77;
    --primary-2: 5, 26, 111;
    --primary-3: 13, 44, 146;
    --primary-4: 24, 66, 180;
    --primary-5: 38, 91, 215;
    --primary-6: 72, 122, 223;
    --primary-7: 109, 153, 231;
    --primary-8: 147, 184, 239;
    --primary-9: 189, 214, 247;
    --primary-10: 232, 243, 255;

    --color-background: #17171A;
    --color-text: #CCCCCC;
    --color-border: #484849;
    --color-text-page-nav: #CCCCCC;
    --color-bg-page-nav: #17171A;
    --color-bg-page-nav-active: #2d3443;
}

html {
    background-color:transparent;
}

body {
    background-color: var(--color-background);
    font-size: 14px;
    color: var(--color-text);
}

@font-face {
    font-family: AlibabaPuHuiTi;
    src: url('./assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
}

/////////// layout start ///////////

.page-container {
    height: calc(100vh - var(--window-header-height));
    width: 100vw;
}

.page-narrow-container {
    max-width: 100rem;
    margin: 0 auto;
}

.page-nav-item {
    color: var(--color-text-page-nav);

    &.active {
        background: var(--color-bg-page-nav-active);
        color: var(--color-text-page-nav-active);
    }
}

.window-header {
    -webkit-user-select: none;

    .window-header-title {
        -webkit-app-region: drag;
    }
}

* {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #FFFFFF;
    }

    &::-webkit-scrollbar-thumb {
        background: #999999;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #888888;
    }
}

body[data-theme="dark"] {
    * {
        &::-webkit-scrollbar-track {
            background: #222222;
        }

        &::-webkit-scrollbar-thumb {
            background: #333333;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #888888;
        }
    }
}

/////////// layout end ///////////

/////////// global start ///////////

.text-link {
    color: #007bff;
    cursor: pointer;
}

.hover\:text-primary {
    &:hover {
        color: var(--color-primary);
    }
}

.bg-default {
    background-color: var(--color-background);
}

.bg-primary {
    background-color: var(--color-primary);
}

.text-default {
    color: var(--color-text);
}

.text-primary {
    color: var(--color-primary);
}

.border-default{
    border-color: var(--color-border);
}

.debug {
    border: 1px solid red;
}

/////////// global end ///////////


/////////// arco start ///////////
.arco-btn, .arco-input-wrapper {
    border-radius: 0.5rem;
}

.arco-tabs-tab-title {
    &:before {
        border-radius: 0.5rem !important;
    }
}

.arco-modal-confirm {
    .arco-modal-header {
        border-bottom: none;
    }

    .arco-modal-footer {
        border-top: none;
    }
}

/////////// arco end ///////////

